<template>
  <el-menu
    default-active="/MainHome"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    text-color="#EEA8A8"
    active-text-color="#F18290"
    style="border-color: #EEA8A8;"
    router
  >
    <el-menu-item class="topbar-logo"><img src="../assets/logo.png" alt="logo" style="width:70px" index="/"></el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="/MainHome">主页</el-menu-item>
    <el-menu-item index="/Me">我的</el-menu-item>
  </el-menu>
</template>

<script>
export default {

}
</script>

<style>
  .flex-grow {
    flex-grow: 1;
  }
  .el-menu-item.is-active {
    background: #EEA8A815;
  }
  .el-menu-item:not(.is-disabled):focus, .el-menu-item:not(.is-disabled):hover {
    background-color: #EEA8A810 !important;
  }
</style>